<template>
    <div id="info-base">
        <ul class="steps">
            <li class="steps__item active">
                <span>1</span>
                <p>基础信息</p>
            </li>
            <!-- <li class="steps__item">
                <span>2</span>
                <p>工作信息</p>
            </li> -->
            <li class="steps__item">
                <span>2</span>
                <p>紧急联系人</p>
            </li>
        </ul>

        <ul class="form-box">
            <li class="form__item">
                <span class="form__key">QQ号码</span>
                <div class="form__value">
                    <input v-model='qq' type="text" placeholder="请输入QQ">
                </div>
            </li>
            <li class="form__item select">
                <span class="form__key">学历</span>
                <div class="form__value">
                    <picker-list picker-id='edu' :list='eduList' v-model='edu'></picker-list>
                </div>
            </li>
            <li class="form__item select">
                <span class="form__key">城市</span>
                <div class="form__value">
                    <city @set='setCity'></city>
                </div>
            </li>
            <li class="form__item">
                <span class="form__key">详细地址</span>
                <div class="form__value">
                    <input v-model='address' type="text" placeholder="请输入街道、门牌号等">
                </div>
            </li>
            <!-- <li class="form__item select">
                <span class="form__key">居住时长</span>
                <div class="form__value">
                    <picker-list picker-id='liveTime' :list='liveTimeList' v-model='liveTime'></picker-list>
                </div>
            </li> -->
            <li class="form__item select">
                <span class="form__key">婚姻状况</span>
                <div class="form__value">
                    <picker-list picker-id='maritalStatus' :list='maritalStatusList' v-model='maritalStatus'></picker-list>
                </div>
            </li>
        </ul>

        <div class="next" @click='next'>
            <span class="button">下一步</span>
        </div>
        <!-- <p class="bind-explain">有借为您的信息提供安全加密，不会泄漏给第三方</p> -->


        <modal 
            :show='show_warning'
            :maskClose='false'>
            <div class="modal-bind-card-warning">
                <p>感谢您选择有借，基于风控考虑，在有借进行借款／出借业务的用户，年龄必须在18周岁-55周岁。为您带来不便，请谅解。</p>
                <div class="modal-bind-card__button"><span @click='show_warning = false'>关闭</span></div>
            </div>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import city from '../components/City.vue'
    import maritalList from '../data/maritalList'
    import eduList from '../data/eduList'
    import liveTimeList from '../data/liveTimeList'
    import  { mapGetters, mapActions }  from 'vuex'
    import { infoBaseValidation } from '../validation/validation'
    import { getQueryString } from '../utils/utils'
    import { userApi, lenderApi, authApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            city,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,tabBox,
            tab
        },
        data() {
            return {
                from:this.$route.query.from,
                qq:'',
                edu:'',
                eduList:eduList,
                liveTime:'',
                liveTimeList:liveTimeList,
                maritalStatus:'',
                maritalStatusList:maritalList,
                address:'',
                city:'杭州',
                province:'浙江',
                action:this.$route.query.action,
                name:'',
                id:'',
                card:'',
                tel:'',
                show_warning:false
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            userInfo(){
                return this.localInfo.userInfo
            },
            ageAuth(){
                let id = this.id
                let date = id.substring(6, 10) + "-" + id.substring(10, 12) + "-" + id.substring(12, 14);
                let momentDate = moment(date)
                let momentNow = moment()
                let diff = momentNow.diff(momentDate, 'years')
                
                if(diff>=18 && diff<= 55){
                    return true
                }
                return false
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setGoHome',
                'setUserInfo'
            ]),

            // function

            setCity(params){
                this.city = params.cityName
                this.province = params.provName
            },
            getStatus(){
                return authApi.authItemStatus({
                    itemCode:'personal'
                })
                .then(result=>{
                    if(result.status >= 30){
                        this.$router.push({ name:'auth' })
                    }
                })
                .catch(error=>{
                    console.error(error)
                })
            },
            next(){
                let params = {
                    address:this.address,
                    city:this.city,
                    edu:this.edu,
                    // liveTime:this.liveTime,
                    maritalStatus:this.maritalStatus,
                    province:this.province,
                    qq:this.qq
                }
                if(!infoBaseValidation(params)) return

                this.showLoading()
                authApi.basicInfoAuth(params)
                .then(result=>{
                    this.hideLoading()
                    this.setMsgTip({
                        text:'提交基础信息成功！',
                        type:'success'
                    })
                    this.$router.push({
                        name:'contact'
                    })
                })
                .catch(error=>{
                    console.error(error)
                    this.hideLoading()
                })

            },
        },
        created(){
            this.getStatus()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #info-base{
        .next{
            overflow:hidden;
            margin-left: 40px;
            margin-right: 40px;
            margin-top: 16px;
        }
    }

</style>
